<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../css/pub.css">
</head>

<body>
    <div class="head">
        <div class="head-top">
            <div class="welcome">爱书的朋友们，欢迎来淘书！</div>
            <ul>
                <li>
                    <a href="../index.html">首页</a>
                    <a href="login.html">我的淘书</a>
                    <a href="car.html">购物车</a>
                    <a href="build.html">帮助中心</a>
                    <a href="">400-8888-184</a>
                </li>
            </ul>
        </div>
    </div>
    <header class="header">
        <div class="w">
            <div class="logo"><img src="../static/img/taoshu-logo.jpg" alt=""></div>
            <div class="search">
                <input type="text" placeholder="请输入关键词" id="txt1"><input type="button" value="搜索" id="sea">
            </div>
        </div>
    </header>
    <nav class="nav">
        <div class="w">
            <ol>
                <li><a href="list.html">文学</a></li>
                <li><a href="list.html">小说</a></li>
                <li><a href="list.html">传记</a></li>
                <li><a href="list.html">艺术</a></li>
                <li><a href="list.html">收藏/鉴赏</a></li>
                <li><a href="list.html">经济管理</a></li>
                <li><a href="list.html">自我实现/励志</a></li>
                <li><a href="list.html">考试</a></li>
                <li><a href="list.html">青春文学</a></li>
                <li><a href="list.html">散文随笔</a></li>
            </ol>
        </div>
    </nav>
    <article class="article">
        <div class="w">
            <div class="article-left">
                <dl>
                    <dt>文学</dt>
                    <dd><a href="build.html">文学理论</a></dd>
                    <dd><a href="build.html">文学史</a></dd>
                    <dd><a href="build.html">作品集</a></dd>
                    <dd><a href="build.html">纪实文学</a></dd>
                    <dd><a href="build.html">诗歌词曲赋</a></dd>
                    <dd><a href="build.html">散文随笔</a></dd>
                    <dd><a href="build.html">戏剧戏曲</a></dd>
                    <dd><a href="build.html">民间文学</a></dd>
                    <dd><a href="build.html">文学评论与研究</a></dd>
                </dl>
            </div>
            <div class="article-right">
                <ul id="cont"></ul>
            </div>
        </div>
    </article>
    <footer class="footer">
        <div class="w">
            <div class="footer-nav">
                <dl>
                    <dt>新手入门</dt>
                    <dd><a href="">购物流程</a></dd>
                    <dd><a href="">发票制度</a></dd>
                    <dd><a href="">积分说明</a></dd>
                    <dd><a href="">我的订单</a></dd>
                    <dd><a href="">关于特价书</a></dd>
                </dl>
                <dl>
                    <dt>配送方式</dt>
                    <dd><a href="">派送时间和运费</a></dd>
                    <dd><a href="">验货与签收</a></dd>
                    <dd><a href="">订单配送查询</a></dd>

                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="">货到付款</a></dd>
                    <dd><a href="">网上支付</a></dd>
                    <dd><a href="">邮局汇款</a></dd>
                    <dd><a href="">银行转账</a></dd>
                    <dd><a href="">账户余额</a></dd>
                </dl>
                <dl>
                    <dt>售后服务</dt>
                    <dd><a href="">退换货政策</a></dd>
                    <dd><a href="">退换货流程</a></dd>
                    <dd><a href="">退换货申请</a></dd>
                    <dd><a href="">退款说明</a></dd>
                    <dd><a href="">申请余额提现</a></dd>
                </dl>
                <dl>
                    <dt>帮助信息</dt>
                    <dd><a href="">常见问题</a></dd>
                    <dd><a href="">找回密码</a></dd>
                    <dd><a href="">汇款单招领</a></dd>
                    <dd><a href="">联系客服</a></dd>
                </dl>
            </div>
            <div class="cooper">
                <span class="Company">合作单位： </span>
                <ul>
                    <li><a href="">读书网</a></li>
                    <li><a href="">中国网读书频道</a></li>
                    <li><a href="">起点中文网</a></li>
                    <li><a href="">人大经济网</a></li>
                    <li><a href="">杂志网</a></li>
                    <li><a href="">大佳网</a></li>
                    <li><a href="">中国教育网</a></li>
                    <li><a href="">出版商务周报</a></li>
                    <li><a href="">作家在线</a></li>
                    <li><a href="">凯迪社区</a></li>
                    <li><a href="">中国教育网</a></li>
                    <li><a href="">出版商务周报</a></li>
                    <li><a href="">作家在线</a></li>
                    <li><a href="">凯迪社区</a></li>
                </ul>
            </div>
            <div class="footer-copy">
                <ul>
                    <li><a href="">关于淘书</a></li>
                    <li><a href="">数目清单</a></li>
                    <li><a href="">网站联盟</a></li>
                    <li><a href="">免费条款</a></li>
                    <li><a href="">数据API</a></li>
                    <li><a href="">友情链接</a></li>
                </ul>
                <ul>
                    <li>Copyright &copy;2012-2015淘书网Taoshu.com版权所有 </li>
                    <span>|</span>
                    <li>京ICP备12020895出版物经营许可证 新出发京零字第朝110069号</li>
                </ul>
            </div>

        </div>
    </footer>
</body>
<script src="../js/ajax-promise.js"></script>
<script>
    class List {
        constructor() {
            this.url = "http://localhost/project/data/goods.json";
            this.cont = document.getElementById("cont");
            // console.log(this.cont);
            this.load();
            this.addEvent();
        }
        load() {
            ajax({
                url: this.url
            }).then((res) => {
                this.res = JSON.parse(res);
                this.display();
            })
        }
        display() {
            // console.log(this.res);要在服务器的环境下请求数据
            let str = "";
            for (var i = 0; i < this.res.length; i++) {
                str += ` <li index="${this.res[i].goodsId}">
                            <a href="details.html?id=${this.res[i].goodsId}">
                            <img src="${this.res[i].img}" alt="">
                            <div class="brief">
                                <h4>${this.res[i].name}</h4>
                                <span class="author">${this.res[i].author}</span>
                                <p class="inst">${this.res[i].synopsis}</p>
                            </div>
                            <div class="car">
                                <h3>￥${this.res[i].taoshu}</h3>
                            </div>
                            </a>
                            <input type="button" value="加入购物车" class="add">    
                        </li>`;

            }
            this.cont.innerHTML = str;
        }
        addEvent() {
            var that = this;
            this.cont.onclick = function(eve) {
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if (tar.className == "add") {
                    that.goodsId = tar.parentNode.getAttribute("index");
                    that.setData();
                }
            }
        }
        setData() {
            // console.log(this.goodsId);
            var gm = localStorage.getItem("goodsMsg");
            if (gm === null) {
                gm = [{
                    goodsId: this.goodsId,
                    num: 1,
                    msg: this.getData(this.goodsId)
                }];
            } else {
                gm = JSON.parse(gm);
                var abc = 0;
                for (var i = 0; i < gm.length; i++) {
                    if (gm[i].goodsId === this.goodsId) {
                        gm[i].num++;
                        abc = 1;
                        break;
                    }
                }
                if (abc == 0) {
                    gm.push({
                        goodsId: this.goodsId,
                        num: 1,
                        msg: this.getData(this.goodsId)
                    })
                }
            }
            localStorage.setItem("goodsMsg", JSON.stringify(gm));
        }
        getData(id) {
            for (var i = 0; i < this.res.length; i++) {
                if (this.res[i].goodsId === id) {
                    return this.res[i];
                }
            }
            return {};
        }
    }
    new List();
</script>

</html>